<template>
	<uni-row class="demo-uni-row df">
		<uni-col class="df1" :xs="24" :sm="24" :md="24">
			<uni-swiper-dot @clickItem=clickItem :info="info" :current="current" field="content" :mode="mode">
				<swiper class="swiper-box" @change="change">
					<swiper-item v-for="(item ,index) in info" :key="index">
						<view class="swiper-item">
							<!-- <video src="/static/image/sun.map4" controls="true" style="width: 100%;"></video> -->
							<img src="/static/image/qc2.png" class="imgStyle">
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>

		</uni-col>
		<uni-col class="df1" :xs="24" :sm="24" :md="24">
			<view class="demo-uni-col light">
				<uni-data-select placeholder="请选中今天想玩的222!" v-model="selectValue" :localdata="range"
					@change="selectChange"></uni-data-select>
			</view>
		</uni-col>

		<uni-scroll-view class="df3" scroll-y>
			<uni-col :xs="12" :sm="12" :md="12">
				<uni-card title="基础卡片" extra="额外信息">
					<text class="uni-body">这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。</text>
				</uni-card>
			</uni-col>
			<uni-col :xs="12" :sm="12" :md="12">
				<uni-card title="基础卡片" extra="额外信息">
					<text class="uni-body">这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。</text>
				</uni-card>
			</uni-col>
			<uni-col :xs="12" :sm="12" :md="12">
				<uni-card title="基础卡片" extra="额外信息">
					<text class="uni-body">这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。</text>
				</uni-card>
			</uni-col>
			<uni-col :xs="12" :sm="12" :md="12">
				<uni-card title="基础卡片" extra="额外信息">
					<text class="uni-body">这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。</text>
				</uni-card>
			</uni-col><uni-col :xs="12" :sm="12" :md="12">
				<uni-card title="基础卡片" extra="额外信息">
					<text class="uni-body">这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。</text>
				</uni-card>
			</uni-col><uni-col :xs="12" :sm="12" :md="12">
				<uni-card title="基础卡片" extra="额外信息">
					<text class="uni-body">这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。</text>
				</uni-card>
			</uni-col><uni-col :xs="12" :sm="12" :md="12">
				<uni-card title="基础卡片" extra="额外信息">
					<text class="uni-body">这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。</text>
				</uni-card>
			</uni-col><uni-col :xs="12" :sm="12" :md="12">
				<uni-card title="基础卡片" extra="额外信息">
					<text class="uni-body">这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。</text>
				</uni-card>
			</uni-col><uni-col :xs="12" :sm="12" :md="12">
				<uni-card title="基础卡片" extra="额外信息">
					<text class="uni-body">这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。</text>
				</uni-card>
			</uni-col><uni-col :xs="12" :sm="12" :md="12">
				<uni-card title="基础卡片" extra="额外信息">
					<text class="uni-body">这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。</text>
				</uni-card>
			</uni-col><uni-col :xs="12" :sm="12" :md="12">
				<uni-card title="基础卡片" extra="额外信息">
					<text class="uni-body">这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。</text>
				</uni-card>
			</uni-col><uni-col :xs="12" :sm="12" :md="12">
				<uni-card title="基础卡片" extra="额外信息">
					<text class="uni-body">这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。</text>
				</uni-card>
			</uni-col>
		</uni-scroll-view>
	</uni-row>
</template>

<script>
	export default {
		data() {
			return {
				info: [{
					content: '内容 A'
				}, {
					content: '内容 B'
				}, {
					content: '内容 C'
				}],
				current: 0,
				mode: 'round',
				selectValue: 0,
				range: [{
						value: 0,
						text: "排列三"
					},
					{
						value: 1,
						text: "排列五"
					},
					{
						value: 2,
						text: "七星彩"
					},
					{
						value: 3,
						text: "大乐透"
					},
				]
			}
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			selectChange(e) {
				console.log("e:", e);
			},
		}
	}
</script>

<style>
	.demo-uni-row {
		margin-bottom: 10px;
		/* QQ、抖音小程序文档写有 :host，但实测不生效 */
		/* 百度小程序没有 :host，需要设置block */
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	/* 支付宝小程序没有 demo-uni-row 层级 */
	/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	/deep/ .uni-row {
		margin-bottom: 10px;
	}

	/* #endif */

	.demo-uni-col {
		height: 36px;
		/* line-height: 36px; */
		border-radius: 4px;
	}

	.dark_deep {
		background-color: #99a9bf;
	}

	.dark {
		background-color: #d3dce6;
	}

	.light {
		background-color: #e5e9f2;
	}

	.imgStyle {
		width: 100%;
		object-fit: cover;
	}
	.list-box {
		background-color: red;
		width: 100%;
		height: 200px;
	}
	
	.df {
		display: flex;
		flex-direction: column;
	}
	.df1 {
		flex: 1;
	}
	.df2 {
		flex: 1;
	}
	.df3 {
		flex: 1;
	}
</style>